---
title: Android
date: 2024-12-20
description: A mockup of an Android device.
author: dillionverma
published: true
---

<ComponentPreview name="android-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @magicui/android
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="android" />

</Steps>

</TabsContent>

</Tabs>

## Examples

### With Image

<ComponentPreview name="android-demo-2" />

### With Video

<ComponentPreview name="android-demo-3" />

## Usage

```tsx showLineNumbers
import { Android } from "@/components/ui/android"
```

```tsx showLineNumbers
<Android />
```

## Props

| Prop       | Type     | Default | Description                        |
| ---------- | -------- | ------- | ---------------------------------- |
| `width`    | `number` | `433`   | The width of the Android window    |
| `height`   | `number` | `882`   | The height of the Android window   |
| `src`      | `string` | `-`     | The source of the image to display |
| `videoSrc` | `string` | `-`     | The source of the video to display |

The `Android` component also accepts all properties of the `SVGElement` type.
